<!-- 商品详情的底部导航 -->
<template>
	<su-fixed bottom placeholder bg="bg-white">
		<view class="ui-tabbar-box">
			<view class="ui-tabbar ss-flex ss-col-center ">
				<!-- 	<view v-if="collectIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
					@tap="onFavorite">
					<block v-if="modelValue.favorite">
						<image class="item-icon" src="@/static/img/shop/goods/collect_1.png" mode="aspectFit" />
						<view class="item-title">已收藏</view>
					</block>
					<block v-else>
						<image class="item-icon" src="@/static/img/shop/goods/collect_0.png" mode="aspectFit" />
						<view class="item-title">收藏</view>
					</block>
				</view> -->
				<view v-if="serviceIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
					@tap="onChat">
					<image class="item-icon" src="@/static/img/shop/goods/message.png" mode="aspectFit" />
					<view class="item-title">客服</view>
				</view>
				<uni-badge :text="sheep.$store('cart').list.length" absolute="rightTop" size="small" :offset="[12, 0]">

					<view class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center" @tap="onCart">
						<image class="item-icon" src="@/static/img/shop/goods/cart.png" mode="aspectFit" />
						<view class="item-title">购物车</view>
					</view>
				</uni-badge>

				<!-- <view v-if="shareIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
					@tap="showShareModal">
					<image class="item-icon" src="@/static/img/shop/goods/share.png" mode="aspectFit" />
					<view class="item-title">分享</view>
				</view> -->
				<slot></slot>
			</view>
		</view>
	</su-fixed>
</template>

<script setup>
	/**
	 *
	 * 底部导航
	 *
	 * @property {String} bg 			 			- 背景颜色Class
	 * @property {String} ui 			 			- 自定义样式Class
	 * @property {Boolean} noFixed 		 			- 是否定位
	 * @property {Boolean} topRadius 		 		- 上圆角
	 */
	import {
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {
		showShareModal
	} from '@/sheep/hooks/useModal';
	import FavoriteApi from '@/sheep/api/product/favorite';

	// 数据
	const state = reactive({});

	// 接收参数
	const props = defineProps({
		modelValue: {
			type: Object,
			default () {},
		},
		bg: {
			type: String,
			default: 'bg-white',
		},
		bgStyles: {
			type: Object,
			default () {},
		},
		ui: {
			type: String,
			default: '',
		},

		noFixed: {
			type: Boolean,
			default: false,
		},
		topRadius: {
			type: Number,
			default: 0,
		},
		collectIcon: {
			type: Boolean,
			default: true,
		},
		serviceIcon: {
			type: Boolean,
			default: true,
		},
		shareIcon: {
			type: Boolean,
			default: true,
		},
	});

	async function onFavorite() {
		// 情况一：取消收藏
		if (props.modelValue.favorite) {
			const {
				code
			} = await FavoriteApi.deleteFavorite(props.modelValue.id);
			if (code !== 0) {
				return
			}
			sheep.$helper.toast('取消收藏');
			props.modelValue.favorite = false;
			// 情况二：添加收藏
		} else {
			const {
				code
			} = await FavoriteApi.createFavorite(props.modelValue.id);
			if (code !== 0) {
				return
			}
			sheep.$helper.toast('收藏成功');
			props.modelValue.favorite = true;
		}
	}

	const onChat = () => {
		console.log('跳转客服', props.modelValue.id)
		sheep.$router.go('/pages/chat/index', {
			id: props.modelValue.id,
		});
	};

	const onCart = () => {
		sheep.$router.go('/pages/index/cart');
	};
</script>

<style lang="scss" scoped>
	.ui-tabbar-box {
		box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
	}

	.ui-tabbar {
		display: flex;
		height: 50px;
		background: #fff;
		justify-content: space-around;

		.detail-tabbar-item {
			width: 100rpx;

			.item-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.item-title {
				font-size: 20rpx;
				font-weight: 500;
				line-height: 20rpx;
				margin-top: 12rpx;
			}
		}
	}
</style>